import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import './index.less';

export interface REChartProps {
  option: echarts.EChartsOption;
  style?: React.CSSProperties;
}
const REChart: React.FC<REChartProps> = (props) => {
  const chartRef: any = useRef(); //拿到DOM容器
  const { option, style } = props;
  // 每当props改变的时候就会实时重新渲染
  useEffect(() => {
    const chart = echarts.init(chartRef.current); //echart初始化容器
    chart.setOption(option);
  }, [props]);

  return <div ref={chartRef} className="chart" style={style}></div>;
};

export default REChart;
